<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col-md-6">
        <h5 class="card-title">商品明细表</h5>
      </div>
      <div class="col-md-6">
        <div class="text-end">
          <!-- 搜索框 -->
          <div class="input-group">
            <span class="input-group-text bg-light border-end-0">
              <i class="fa fa-search text-muted"></i>
            </span>
            <input 
              type="text" 
              class="form-control border-start-0" 
              placeholder="按商品名称或代码搜索..." 
              [(ngModel)]="nameKeyword"
              (keyup.enter)="searchProducts()"
            />
            <button class="btn btn-primary" type="button" (click)="searchProducts()">
              搜索
            </button>
            <button *ngIf="isSearchMode" class="btn btn-outline-secondary" type="button" (click)="resetSearch()">
              重置
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card-body">
    <!-- 错误信息显示 -->
    <div *ngIf="hasError" class="alert alert-danger">
      <strong>错误：</strong> {{ errorMessage }}
      <button class="btn btn-sm btn-outline-danger float-end" (click)="retryLoad()">
        <i class="fa fa-refresh"></i> 重试
      </button>
    </div>
    
    <!-- 加载指示器 -->
    <div *ngIf="isLoading" class="text-center my-3">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
      </div>
      <p class="mt-2">数据加载中，请稍候...</p>
    </div>
    
    <!-- 数据表格 -->
    <div *ngIf="!isLoading" class="table-responsive">
      <!-- 加载按钮 -->
      <div class="mb-3 text-end">
        <button class="btn btn-outline-primary" (click)="loadDataDirectly()">
          <i class="fa fa-refresh me-1"></i> 刷新数据
        </button>
      </div>
      
      <!-- 数据表格 -->
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>货主代码</th>
            <th>商品代码</th>
            <th>SKU</th>
            <th>商品名称</th>
            <th>基本单位</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of shopWhere.items">
            <td><span class="badge bg-primary text-white">{{ item.ownerCode }}</span></td>
            <td>{{ item.productCode }}</td>
            <td>{{ item.productSku }}</td>
            <td>{{ item.productName }}</td>
            <td>{{ item.baseUnit }}</td>
          </tr>
          <tr *ngIf="shopWhere.items.length === 0">
            <td colspan="5" class="text-center">
              <i class="fa fa-info-circle me-1"></i> 暂无数据
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 分页控件 -->
      <div class="d-flex justify-content-between align-items-center mt-3">
        <div>
          <!-- 页大小选择器 -->
          <div class="d-flex align-items-center">
            <label class="me-2">每页显示:</label>
            <select class="form-select form-select-sm" 
                    [(ngModel)]="currentPageSize" 
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
        </div>
        
        <!-- 分页组件 -->
        <div class="d-flex align-items-center">
          <div class="mb-0 me-3">
            共 {{ shopWhere.totalCount }} 条数据
          </div>
          
          <nav aria-label="Page navigation">
            <ul class="pagination mb-0">
              <!-- 前一页按钮 -->
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:void(0)" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              
              <!-- 页码按钮 -->
              <li *ngFor="let pageNumber of visiblePageNumbers" 
                  class="page-item" 
                  [class.active]="pageNumber === list.page">
                <a class="page-link" href="javascript:void(0)" (click)="goToPage(pageNumber)">
                  {{ pageNumber }}
                </a>
              </li>
              
              <!-- 后一页按钮 -->
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:void(0)" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              
              <!-- 跳转页码输入框 -->
              <li class="page-item">
                <div class="input-group input-group-sm ms-2" style="width: 100px;">
                  <input type="number" 
                         class="form-control" 
                         min="1" 
                         [max]="maxPageCount"
                         [(ngModel)]="inputPageNumber" 
                         (change)="onPageInputChange($event)"
                         (keyup)="onPageInputKeyUp($event)"
                         placeholder="跳转"/>
                  <button class="btn btn-outline-primary" type="button" (click)="goToPage(inputPageNumber)">
                    跳转
                  </button>
                </div>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div> 